<template>
  <div class="select-question-container">
    <el-container class="select-question-content container-content">
      <el-header>
        <slot></slot>
      </el-header>
      <div class="question-number-container">
        第 <span class="question-number">{{ questionindex }}</span>
        题 ({{ question.type === "多选" ? "不定项选择" : question.type }})
      </div>
      <el-scrollbar>
        <div class="question-content">
          <div class="context question-html editor-content-view" v-html="question.context"></div>
          <div v-if="question.type === '判断'" class="row">
            <div class="col-6">
              <div class="select-judgment cursor-pointer dui">
                <el-container :class="data == true ? 'bg-judgment' : ''" @click="panduan(true)">
                  <el-main class="select-main p-0">
                    <el-row>
                      <el-col class="text-center div">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-dui" />
                        </svg>
                        正确
                      </el-col>
                    </el-row>
                  </el-main>
                </el-container>
              </div>
            </div>
            <div class="col-6">
              <div class="select-judgment cursor-pointer cuo">
                <el-container :class="data === false ? 'bg-judgment' : ''">
                  <el-main @click="panduan(false)" class="select-main p-0">
                    <el-row>
                      <el-col class="text-center div">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-cuowu" />
                        </svg>
                        错误
                      </el-col>
                    </el-row>
                  </el-main>
                </el-container>
              </div>
            </div>
          </div>
          <div v-else-if="question.type === '单选'" class="row">
            <div class="col-6 choose-item" v-for="(v, k) in option" :key="k">
              <div class="select-choice cursor-pointer" :class="data == choice[k] ? 'bg-choice' : ''">
                <el-container @click="xuanze(choice[k])">
                  <el-aside width="100px" class="select-choice-label">
                    <div v-text="choice[k]"></div>
                  </el-aside>
                  <el-main class="select-main p-0">
                    <el-row>
                      <el-col class="position-relative" style="min-height: 60px" :span="24">
                        <!-- :preview-src-list="[v]" -->
                        <el-image :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" class="el-img" v-if="image(v)"
                          :src="v" />
                        <span v-else class="text-truncate d-inline-block question-html">{{ v }}</span>
                      </el-col>
                    </el-row>
                  </el-main>
                </el-container>
              </div>
            </div>
          </div>
          <div v-else-if="question.type === '多选'" class="row">
            <div class="col-6 choose-item" v-for="(v, k) in choice" :key="k">
              <div class="select-choice cursor-pointer"
                :class="Array.isArray(data) && data.includes(v) ? 'bg-choice' : ''">
                <el-container @click="xuanze(choice[k], true)">
                  <el-aside width="100px" class="select-choice-label">
                    <div v-text="choice[k]"></div>
                  </el-aside>
                  <el-main class="p-0 select-main">
                    <el-row>
                      <el-col class="position-relative" style="min-height: 60px" :span="24">
                        <!-- :preview-src-list="[option[k]]" -->
                        <el-image :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" class="el-img"
                          v-if="image(option[k])" :src="option[k]" />
                        <span class=" text-truncate d-inline-block question-html" v-else>{{ option[k] }}</span>
                      </el-col>
                    </el-row>
                  </el-main>
                </el-container>
              </div>
            </div>
          </div>
          <div v-else-if="question.type === '填空'" class="form-group row justify-content-md-center">
            <label for="staticEmail" class="col-12 col-form-label text-center mb-3">空白处填入：</label>
            <div class="col-12 text-center">
              <input class="pl-3 form-control" id="staticEmail" v-model="data" placeholder="请在此处填写内容" />
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import {
  computed,
  nextTick,
  onMounted,
  ref,
  toRaw,
  toRefs,
  watch,
} from "vue";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { isImage } from "../../../util/RegExp";
import questionhtml from "../../../util/htmlstring";
const choice = ['A', 'B', 'C', 'D']

const p = withDefaults(defineProps<{ index?: number, question: Studycodemodel.Imatchquestion, questionindex: number }>(), {
  index: 1,
})
const { question } = toRefs(p);

const option = computed(() => {
  if (question.value.answer) {
    return question.value.answer.options || [];
  }
  return [];
});

const answer = computed(() => {
  if (question.value.answer) {
    return String(question.value.answer.answer) || "";
  }
  return "";
});

const data = ref<boolean | string | string[]>();

watch(
  () => question.value,
  () => {
    data.value = "";
    nextTick(() => {
      const { name } = toRaw(question.value);
      document.title = name || "noipcode";
      questionhtml();
    });
  }
);

watch(
  () => p.index,
  () => {
    data.value = "";
  }
);
function image(str: string) {
  return isImage.test(str);
}
function panduan(t: boolean) {
  data.value = t;
}

function xuanze(t: string, type?: boolean) {
  if (type) {
    // 多选
    if (!Array.isArray(data.value)) {
      data.value = [];
    }
    const f = data.value.findIndex((v) => v === t);

    if (f !== -1) {
      data.value.splice(f, 1);
    } else {
      if (data.value.length >= 4) {
        data.value.splice(0, 1);
      }
      data.value.push(t);
    }
  } else {
    data.value = t;
  }
}


onMounted(() => {
  nextTick(() => {
    const { name } = toRaw(question.value);
    document.title = name || "noipcode";
    questionhtml();
  });
});
</script>
<style scoped>
.select-question-container {
  padding: var(--container-margin) 5% 0;
  margin: var(--container-margin) 0rem 0 0rem;

  --container-margin: 20px;
  --border-radius: 28px;

  --container-header-height: 50px;
}

.select-question-content {
  padding: var(--container-margin) 0;
  overflow: hidden;
  background-color: #fff;
}

.question-number-container {
  text-align: center;
  margin: calc(var(--container-margin)/2) auto;
  width: 220px;
  height: 42px;
  border: 1px solid var(--color-cheng);
  border-radius: var(--border-radius);
  line-height: 40px;
  font-size: 16px;
  font-weight: 400;
  color: #909399;
  opacity: 1;
}

.question-number {
  color: var(--sass-color-blue);
}

.question-content {
  width: 100%;
  padding: 10px 30px;
  height: calc(100vh - 64px - var(--container-margin) * 4 - var(--container-header-height) * 2 - 62px);
}

.context {
  margin-bottom: calc(var(--container-margin) * 2);
  background: #ffffff;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 24px;
  padding: var(--container-margin);
}

/*  */
.question-html {
  white-space: pre-wrap;
  /* 数字字母自动换行 */
  word-break: break-all;
  word-wrap: break-word;
}

/* judgment（判断题）optionCorrect（正确）optionIncorrect（错误） */
.select-judgment {
  width: 360px;
  height: 60px;
  line-height: 60px;
  border-radius: var(--border-radius);
  margin: 0 auto;
  opacity: 1;
  transition: all 0.3s;
  overflow: hidden;

  --optionCorrect-color: #3ac2a2;
  --optionIncorrect-color: #f56c6c;
}

.select-judgment .div {
  font-size: 16px;
}

.select-judgment .icon {
  font-size: 36px;
  transform: translateY(7px) translateX(-10px);
}

.dui {
  border: 1px solid var(--optionCorrect-color);
}

.dui .icon {
  color: var(--optionCorrect-color);
}

.dui:hover {
  background-color: #d8f3ee;
}

.cuo {
  border: 1px solid var(--optionIncorrect-color);
}

.cuo .icon {
  color: var(--optionIncorrect-color);
}

.cuo:hover {
  background-color: #fde2e2;
}


.bg-judgment {
  background-color: var(--optionCorrect-color);
  color: #fff !important;
}

.bg-judgment .icon {
  color: #fff !important;
}

.cuo .bg-judgment {
  background-color: var(--optionIncorrect-color);
}

/* singleChoice（单选题） */
/* multipleChoice（多选题） */
.choose-item {
  display: flex;
}

.select-choice {
  min-width: 360px;
  min-height: 60px;
  overflow: hidden;
  margin: auto 0;
  border-radius: var(--border-radius);
  margin-bottom: 50px;
  border: 1px solid var(--color-cheng);
  transition: all 0.3s;
}

.select-choice-label {
  text-align: center;
  font-size: 24px;
  line-height: 60px;
  font-weight: bold;
  opacity: 1;
  color: var(--color-cheng);
}

/* 选择后 */
.bg-choice {
  background-color: var(--color-cheng) !important;
  color: #fff !important;
  font-weight: bold;
}

.bg-choice .select-choice-label {
  color: #fff;
}

/* hover */
.select-choice:hover {
  color: #fff;
  font-weight: bold;
  background: var(--sass-color-blue3);
  border-color: var(--sass-color-blue3);
}

/* 选项内容 */
.select-main {
  font-size: 16px;
  overflow: hidden;
}

.select-main i {
  position: absolute;
  font-size: 60px;
  right: 20px;
  bottom: 20px;
}

.position-relative {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0.5rem 1rem;
}

.el-img {
  max-width: 100%;
  object-fit: cover;
}

/* fillInTheBlank（填空题） */

.form-control {
  width: 400px;
  margin: 0 auto;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #dcdfe6;
  outline: 0;
  box-shadow: none !important;
}
</style>